<template>
  <view class="container">
    <image style="position: fixed;width: 100%;height: 100%;z-index: 0;" :src="loginBg"></image>
    <!-- 登录标题栏 -->
    <!-- #ifndef MP-ALIPAY -->
    <view class="login-title hor-layout-center">
      <view class="back-view hor-layout-center-all" @click="backClick">
        <icon class="fa fa-lg fa-angle-left" style="font-size: 30px"></icon>
      </view>
      <text class="back-title">登陆</text>
    </view>
    <!-- #endif -->
    <!-- 登录中间布局 -->
    <view class="content-layout ver-layout-center-all" :style="getContentStyle">
      <!-- 选择标签栏 -->
      <view class="content-tab hor-layout-center">
        <view @click="selTab=1" class="ver-layout-center" :class="{'tab-select': selTab==1 }">
          邮箱登陆
          <view class="hint-view" :style="{visibility : selTab==1 ?'visible':'hidden'}"></view>
        </view>
        <view @click="selTab=2" class="ver-layout-center" :class="{'tab-select': selTab==2 }">
          手机号登陆
          <view class="hint-view" :style="{visibility : selTab==2 ?'visible':'hidden'}"></view>
        </view>
        <view @click="selTab=3" class="ver-layout-center" :class="{'tab-select': selTab==3 }">
          密码登陆
          <view class="hint-view" :style="{visibility : selTab==3 ?'visible':'hidden'}"></view>
        </view>
      </view>
      <view class="main-content">
        <!-- ================邮箱登陆================ -->
        <view class="main-card" :class="selTab==1 ? 'is-show' : 'is-hidden'">
          <form>
            <view class="input-view hor-layout-center">
              <input class="form__input" :style="filterFocus1" type="text"
                     v-model="email" placeholder="邮箱">
            </view>
            <view class="input-view hor-layout-center">
              <view class="style-view">1</view>
              <input class="form__input" :style="filterFocus2" type="number"
                     v-model="code" maxlength="6" placeholder="验证码">
              <view class="send-yzm" :class="{'no-use':!canEmailSendUse.value}" @click="sendVerifyCode">
                {{ emailVerify }}
              </view>
            </view>
            <button :type="canEmailLoginUse.value?'primary':'default'" class="login-btn" form-type="submit"
                    :class="{'no-use':!canEmailLoginUse.value}"
                    @click="loginByEmail">邮箱登陆
            </button>
            <view class="main-hint-view ver-layout">
              <view class="hor-layout-center-all">
                <view class="style-view-hint">1</view>
                <view>验证码登陆：账号不存在时会自动注册</view>
              </view>
            </view>
          </form>
        </view>
        <!-- ================手机号登陆================ -->
        <view class="main-card" :class="selTab==2 ? 'is-show' : 'is-hidden'">
          <form>
            <view class="input-view hor-layout-center">
              <input class="form__input" :style="filterFocus1" type="number"
                     v-model="mobile" placeholder="手机号"
                     maxlength="11">
            </view>
            <view class="input-view hor-layout-center">
              <view class="style-view">1</view>
              <input class="form__input" :style="filterFocus2" type="number" v-model="smsCode"
                     maxlength="6" placeholder="验证码">
              <view class="send-yzm" :class="{'no-use':!canMobileSendUse.value}" @click="sendMobileCode">
                {{ mobileVerify }}
              </view>
            </view>
            <button :type="canMobileLoginUse.value?'primary':'default'" class="login-btn" form-type="submit"
                    :class="{'no-use':!canMobileLoginUse.value}"
                    @click="loginByMobile">手机号登陆
            </button>
            <view class="main-hint-view">
              <view class="hor-layout-center-all">
                <view class="style-view-hint">1</view>
                <view>验证码登陆：账号不存在时会自动注册</view>
              </view>
            </view>
          </form>
        </view>
        <!-- ================密码登陆================ -->
        <view class="main-card" :class="selTab==3 ? 'is-show' : 'is-hidden'">
          <form>
            <view class="input-view hor-layout-center">
              <input class="form__input" :style="filterFocus1"
                     v-model="account" placeholder="手机号或邮箱" maxlength="20">
            </view>
            <view class="input-view hor-layout-center">
              <view class="style-view">2</view>
              <input class="form__input" :style="filterFocus3" type="text" password="true"
                     v-model="password" placeholder="密码">
            </view>

            <button :type="canPasswordLoginUse.value?'primary':'default'" class="login-btn" form-type="submit"
                    :class="{'no-use':!canPasswordLoginUse.value}"
                    @click="loginByPassword">密码登陆
            </button>
            <view class="main-hint-view">
              <view class="hor-layout-center-all">
                <view class="style-view-hint">2</view>
                <text style="color: #fd364e;">密码登陆：需要先设置密码</text>
              </view>
            </view>
          </form>
        </view>
      </view>
    </view>
    <view class="ver-layout-center mini-login">
      <!-- #ifdef MP-WEIXIN -->
      <button class="login-button-view" open-type="getUserInfo" @getuserinfo="loginByWeChat">
        <view class="ver-layout-center login-button">
          <image class="mini-program-view" :src="miniProgram"></image>
          <view class="mini-program-text">小程序登录</view>
        </view>
      </button>
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY -->
      <button class="login-button-view" open-type="getAuthorize" scope="userInfo" @getAuthorize="getAlipayUserInfo">
        <view class="ver-layout-center login-button">
          <image class="mini-program-view" :src="miniProgram"></image>
          <view class="mini-program-text">小程序登录</view>
        </view>
      </button>
      <!-- #endif -->
      <!-- #ifdef MP-TOUTIAO -->
      <button class="login-button-view" @click="getTtUserInfo">
        <view class="ver-layout-center login-button">
          <image class="mini-program-view" :src="miniProgram"></image>
          <view class="mini-program-text">小程序登录</view>
        </view>
      </button>
      <view class="mini-program-text" style="color: #06AE56;">不支持账号统一</view>
      <!-- #endif -->
    </view>
    <!-- 底部动态图片 -->
    <image class="bottom-image"></image>
  </view>
</template>

<script>
import {
  home
} from '@/router.js'
import {
  updateVistorInfo
} from "@/common/paltform.js"
import loginUtils from "@/common/login-utils.js"

const focusStyle = {
  boxShadow: "inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9",
  backgroundColor: '#dbe6ee'
}
export default {
  data() {
    return {
      selTab: 1,
      // 输入框选择
      index: -1,
      // 邮箱信息
      // email: '1650432983@qq.com',
      email: '',
      code: '',
      emailVerify: '发送验证码',
      // 手机信息
      // mobile: '18810126510',
      mobile: '',
      smsCode: '',
      mobileVerify: '发送验证码',
      account: '',
      password: '',
      loginBg: 'https://mp-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b.cdn.bspapp.com/cloudstorage/498e0f9e-32a3-4bf6-8d2a-619febfab293.jpg',
      miniProgram: require('static/ic_mini_program.png'),
      windowHeight: '',
      newWindowHeight: ''
    }
  },
  computed: {
    filterFocus1() {
      return this.index == 1 ? focusStyle : ""
    },
    filterFocus2() {
      return this.index == 2 ? focusStyle : ""
    },
    filterFocus3() {
      return this.index == 3 ? focusStyle : ""
    },
    canEmailSendUse() {
      if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.email)) return {msg: "邮箱格式错误！", value: false}
      if (this.emailVerify != "发送验证码") return {msg: "", value: false}
      return {value: true}
    },
    canEmailLoginUse() {
      if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.email)) return {msg: "邮箱格式错误！", value: false}
      if (this.code.length != 6) return {msg: "验证码错误！", value: false}
      return {value: true}
    },
    canMobileSendUse() {
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.mobile)) return {msg: "手机号格式错误！", value: false}
      if (this.mobileVerify != "发送验证码") return {msg: '', value: false}
      return {value: true}
    },
    canMobileLoginUse() {
      if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.mobile)) return {msg: "手机号格式错误！", value: false}
      if (this.smsCode.length != 6) return {msg: "验证码错误！", value: false}
      return {value: true}
    },
    canPasswordLoginUse() {
      if (!this.account) return {msg: "请输入账号！", value: false}
      if (!this.password) return {msg: "请输入密码！", value: false}
      return {value: true}
    },
    getContentStyle() {
      if (this.newWindowHeight == this.windowHeight) {
        // #ifdef MP-ALIPAY
        return "margin-top:30%"
        // #endif
        return "margin-top:50%"
      } else {
        return "margin-top:20%"
      }
    }
  },
  onLoad() {
    //小程序不支持以下方法
    uni.onWindowResize(this.windowResizeCallback)
    let {windowHeight} = uni.getWindowInfo()
    this.windowHeight = windowHeight
    this.newWindowHeight = windowHeight
  },
  onUnload() {
    uni.offWindowResize(this.windowResizeCallback)
  },
  methods: {
    windowResizeCallback(res) {
      console.log('变化后的窗口高度=' + res.size.windowHeight)
      this.newWindowHeight = res.size.windowHeight
    },
    loginByWeChat(res) {
      console.log("loginByWeChat", res)
      let userInfo = res.detail.userInfo
      loginUtils.loginByWeChat(userInfo, "wechat", () => {
        setTimeout(() => {
          this.backClick()
        }, 200)
      })
    },
    getAlipayUserInfo() {
      my.getOpenUserInfo({
        success: (res) => {
          let userInfo = JSON.parse(res.response).response
          console.log('alipay getOpenUserInfo success, res: ', userInfo);
          loginUtils.loginByWeChat(userInfo, "", () => {
            setTimeout(() => {
              this.backClick()
            }, 200)
          })
        },
        fail: (err) => {
          console.log('alipay getOpenUserInfo fail, error: ', err);
        }
      });
    },
    getTtUserInfo() {
      uni.login({
        provider: 'toutiao',
      }).then(loginRes => {
        console.log("loginRes", loginRes);
        uni.getUserInfo({}).then(res => {
          console.log("getUserInfo", res)
          let userInfo = res[1].userInfo
          userInfo.flag = "tt"
          uni.setStorageSync("userInfo", userInfo)
          // 保存用户信息
          let mxTtUserInfo = this.userInfo
          updateVistorInfo({
            mxTtUserInfo
          });
          uni.showToast({
            title: "登陆成功"
          })
          setTimeout(() => {
            this.backClick()
          }, 200)
        })
      }).catch(err => {
        uni.showToast({
          title: "登陆失败",
          icon: "none"
        })
      })
    },
    backClick() {
      const pages = getCurrentPages()
      if (pages && pages.length > 1) {
        uni.navigateBack({
          complete: res => {
          }
        });
      } else {
        uni.reLaunch({
          url: home
        })
      }
    },
    startTimeCounter(flag = 0) {
      var num = 20;
      var timer = setInterval(() => {
        num--
        let strVerify = `${num}秒后重试`
        if (num == 0) {
          clearInterval(timer)
          strVerify = "发送验证码"
        }
        if (flag == 0) {
          this.emailVerify = strVerify
        } else {
          this.mobileVerify = strVerify
        }
      }, 1000)
    },
    sendVerifyCode() {
      let {value: canSend, msg} = this.canEmailSendUse
      if (!canSend) {
        if (msg) this.$tools.showToast(msg)
        return
      }
      this.startTimeCounter()
      loginUtils.sendEmailCode(this.email)
    },
    sendMobileCode() {
      let {msg, value: canSend} = this.canMobileSendUse
      if (!canSend) {
        if (msg) this.$toosl.showToast(msg)
        return
      }
      this.startTimeCounter(1)
      loginUtils.sendMobildCode(this.mobile)
    },
    loginByEmail() {
      let {value: canLogin, msg} = this.canEmailLoginUse
      if (!canLogin) {
        if (msg) this.$tools.showToast(msg)
        return
      }
      loginUtils.loginByEmail(this.email, '', this.code, () => {
        setTimeout(() => {
          this.backClick()
        }, 200)
      })
    },
    loginByMobile() {
      // debugger
      let {msg, value: canLogin} = this.canMobileLoginUse
      if (!canLogin) {
        if (msg) this.$tools.showToast(msg)
        return
      }
      loginUtils.loginByMobile(this.mobile, '', this.smsCode, () => {
        setTimeout(() => {
          this.backClick()
        }, 200)
      })
    },
    loginByPassword() {
      let {msg, value: canLogin} = this.canPasswordLoginUse
      if (!canLogin) {
        if (msg) this.$tools.showToast(msg)
        return
      }
      loginUtils.loginByMobile(this.account, this.password, '', () => {
        setTimeout(() => {
          this.backClick()
        }, 200)
      })
    }
  }
}
</script>

<style>
.hint-view {
  margin-top: 2px;
  width: 40px;
  height: 2px;
  background: #10AEFF;
  border-radius: 2px;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none
}

.login-title {
  margin-top: 30px;
  height: 44px;
  position: fixed;
  font-size: large;
  width: 100%;
  color: white;
}

.back-view {
  width: 40px;
  height: 40px;
}

.back-title {
  width: 100%;
  margin-right: 35px;
  text-align: center;
  line-height: 44px;
}

.content-layout {
  width: calc(100% - 30px);
  height: 300px;
  position: fixed;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(to bottom, #C9D6FF, #E2E2E2);
  /* background: #ecf0f3; */
  font-size: 12px;
  margin: 0px 15px;
  margin-top: 50%;
  z-index: 10;
  transition: margin-top 0.3s ease;
}

.content-tab {
  width: 300px;
  justify-content: space-around;
  align-items: none;
  margin-bottom: 20px;
  font-size: 14px;
}

.tab-select {
  font-weight: bold;
}

.main-content {
  position: relative;
  width: 300px;
  height: 220px;
}

.main-card {
  width: -webkit-fill-available;
  /* height: 220px; */
  padding: 15px 25px;
  background-color: #ecf0f3;
  /* box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9; */
  box-shadow: 0 0 5px #b4bfe3;
  border-radius: 12px;
  overflow: hidden;
}

.input-view {
  position: relative;
  height: 30px;
  margin: 7px 0px;
}

.style-view {
  position: absolute;
  left: -20px;
  width: 15px;
  height: 15px;
  color: white;
  border-radius: 50%;
  background: #00BDFF;
  font-size: small;
  text-align: center;
  line-height: 15px;
}

.style-view-hint {
  width: 13px;
  height: 13px;
  color: white;
  line-height: 13px;
  border-radius: 50%;
  margin-right: 5px;
  background: #9b9b9b;
  font-size: smaller;
}

.send-yzm {
  position: absolute;
  color: white;
  right: 3px;
  top: 3px;
  z-index: 100;
  padding: 0px 3px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  letter-spacing: 1px;
  background-color: #00BDFF;
  border-radius: 5px;
}

.no-use {
  color: white;
  background-color: gray;
}

.form__input {
  flex: 1;
  height: 30px;
  margin: 7px 0;
  padding-left: 15px;
  font-size: 13px;
  letter-spacing: .15px;
  border: 0;
  outline: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #ecf0f3;
  transition: .25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9
}

.form__input:focus {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9
}

.login-btn {
  height: 34px;
  line-height: 34px;
  font-size: 15px;
  margin: 15px 50px;
  font-size: small;
  margin-bottom: 0px;
  border-radius: 5px;
}

.main-hint-view {
  width: 100%;
  color: #91d5ff;
  text-align: center;
  margin-top: 7px;
  font-weight: bold;
  font-size: smaller;
}

.bottom-image {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  background-image: url('');
}

.is-show {
  position: absolute;
  visibility: visible;
  animation: zoomInUp 1.3s linear;
}

.is-hidden {
  position: absolute;
  visibility: hidden;
  animation: zoomOutUp 1s linear;
}

.mini-login {
  position: fixed;
  bottom: 100px;
  left: calc(50% - 27px);
  width: 56px;
  height: 56px;
}

.login-button-view {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0px;
  background: #70b8e0;
  box-shadow: 0 0 1px #a2a2a2;
}

.login-button-view:hover {
  background: #36738f;
}

.login-button {
  width: 56px;
  height: 56px;
  border-radius: 4px;
}

.mini-program-view {
  width: 27px;
  height: 27px;
  margin-top: 4px;
}

.mini-program-text {
  font-size: 8px;
  color: white;
  /* #ifdef MP-ALIPAY */
  height: fit-content;
  line-height: 1em;
  margin-top: 6px;
  /* #endif */
}

.mini-program-text:hover {
  color: gray;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@-webkit-keyframes zoomOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
</style>
